<template>
  <div class="product-item">
    <div class="item-info">
      <div class="item-title">
        <div class="item-name">{{info.title}}</div>
        <div class="item-bottomsign"></div>
      </div>
      <div class="item-text">
        <p>
          {{info.text}}
        </p>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        title: 'template test'
      }
    },
    props: {
      info: {
          type: Object
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .product-item
    display: inline-block
    .item-cover
      overflow: hidden
      position: relative
      margin: 0 auto
      padding-top: 30px
      width: 600px
    & .pt-text
       width: 100px
       height: 80px
       float: left
       position: relative
       text-align: center
    & .pt-text em
       font-style: normal
       position: absolute
       left: -9px
       bottom: -58px
       color: #fff
     & .pt-text em s
        padding-left: 10px
    .item-info
      margin: 0 auto
      text-align:center
      color: #fff
      .item-title
        font-size: 48px
        margin-bottom: 45px
      .item-text
        text-align: left
        font-size: 14px
        line-height: 30px
</style>
